<template>
    <div class="manage-wrap">
        <div class="manage">
            <div class="manage-btn flex">
                <a href="javascript:;" :class="idx == index && 'active'" @click="getData(index)" v-for="(item, index) in menuList" :key="index">{{ item.text }}</a>         
            </div>
            <div class="manage-main" v-if="goodsList.length>0">


                <swipeout>
                    <swipeout-item @on-close="handleEvents('on-close')" 
                    @on-open="handleEvents('on-open')" transition-mode="follow"
                    class="manage-list" v-for="(items,index) in  goodsList" :key="index">
                        <div slot="right-menu">
                          <!-- <swipeout-button @click.native="onButtonClick('fav')" type="primary">同意</swipeout-button> -->
                          <swipeout-button @click.native="onButtonClick('delete',items)" type="warn">删除</swipeout-button>
                        </div>
                        <!-- <div slot="content" class="demo-content vux-1px-t">
                            this is a demo
                        </div> -->
                        <div slot="content">
                            <div class="top flex">
                                <img :src="items.logo">
                                <div class="text">
                                    <h2>{{items.name}}</h2>
                                    <span>￥{{items.discountPrice}}</span>
                                    <div class="top-con">
                                        <a href="javascript:;">留言{{items.leaveMessageCount}}</a>·
                                        <a href="javascript:;">浏览{{items.browseCount}}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="bom flex">
                                <div class="flex">
                                    <a href="javascript:;" @click="goEdit(items)">编辑</a>
                                    <a v-show="idx!=2" href="javascript:;" @click="goUpDown(items)">下架</a>
                                    <a v-show="idx==2"  href="javascript:;" @click="goUp(items)">重新上架</a>
                                </div>
                            </div>
                        </div>
                    </swipeout-item>
                </swipeout>



                <!-- <div class="manage-list" v-for="(items,index) in  goodsList" :key="index">
                    <div class="top flex">
                        <img :src="items.logo">
                        <div class="text">
                            <h2>{{items.name}}</h2>
                            <span>￥{{items.discountPrice}}</span>
                            <div class="top-con">
                                <a href="javascript:;">留言{{items.leaveMessageCount}}</a>·
                                <a href="javascript:;">浏览{{items.browseCount}}</a>
                            </div>
                        </div>
                    </div>

                    <div class="bom flex">
                        <div class="flex">
                            <a href="javascript:;" @click="goEdit(items)">编辑</a>
                            <a href="javascript:;" @click="goUpDown(items)">下架</a>
                        </div>

                    </div>
                </div> -->
            </div>
             <div class="group"  v-else >
                <div class="cell-box">
                        <div class="news-box">
                            还没有任何内容，赶紧去使用吧
                        </div>
                </div>
              </div>
        </div>
    </div>

</template>
<script>

import axios from '@/api/request'
import { mapState } from "vuex";
import { Swipeout,SwipeoutItem,SwipeoutButton,AlertModule } from 'vux'

    export default {
        data () {
            return {
                menuList: [
                    {
                        id:'0',
                        text:'我发布的'
                    },
                    {
                        id:'1',
                        text:'我卖出的'
                    },{
                        id:'2',
                        text:'我下架的'
                    }
                ],
                idx: 0,
                goodsList:[],
                listQuery:  {
                    pageNumber: 1,
                    pageSize: 10,
                    param: {
                        ik : "0", //0:我发布的 1: 我卖出的 2: 我下架的  
                        userId : this.userId
                    }
                },
                _userId: '',
            }
        },
        components: {
            Swipeout,SwipeoutItem,SwipeoutButton
            ,AlertModule
        },
        computed:{
            ...mapState({
              openId:state=>state.openId,
              userId:state=>state.userId,
            }),
        },
        created() {
            this._userId = this.$route.query.userId
            if(!this._userId){
                this._userId = this.userId
            }
            this.listQuery.param.userId = this._userId
        },
        mounted(){
           this.getData(this.idx)
        },
        methods:{
            getData(index) {
                this.idx = index
                this.listQuery.param.ik = index
                axios('/device/productSecond/threeTable','post',this.listQuery).then(res=>{
                    if(res.data.code==1000){
                        console.log(res)
                        this.goodsList=res.data.data.list
                    }
                })
            },
            goDetail(item) {
                this.$router.push({path: 'secGoodsDetail',query:{goods: item}})
            },
            goEdit(item) {
                this.$router.push({path: '/publishGoods',query:{userId: this._userId,goodsId: item.id}})

                // let data = {
                //     id: item.id,
                //     name: "游戏账号",           //产品名称
                //     // logo: "",         //产品LOGO
                //     price: 500,          //产品原价
                //     discountPrice: 20,   //产品折后价
                //     postPrice: 5,
                //     description: "这是修改的介绍",
                // }
                // axios('/device/productSecond/update','post',data).then(res=>{
                //     if(res.data.code==1000){
                //         console.log(res)     
                //     }
                // })
            },
            goUpDown(row) {
                let data = {
                    id: row.id,
                    updown: 1,   //1下架，0上架
                }
                axios('/device/productSecond/setAble','post',data).then(res=>{
                    if(res.data.code==1000){
                        this.$vux.toast.text('下架成功', 'middle')
                        this.getData(this.idx)   
                    }
                })
            },
            goUp(row){
              let data = {
                    id: row.id,
                    updown: 0,   //1下架，0上架
                }
                axios('/device/productSecond/setAble','post',data).then(res=>{
                    if(res.data.code==1000){
                        this.$vux.toast.text('上架成功', 'middle')
                        this.getData(this.idx)   
                    }
                })
            },
            onButtonClick (type,row) {
                this.showPlugin(row)
            },
            handleEvents (type) {
                // console.log('event: ', type)
            },
            showPlugin (row) {
                this.$vux.confirm.show({
                    title: '提示',
                    content: '此操作将永久删除该商品',
                    onShow () {
                      // console.log('plugin show')
                    },
                    onHide () {
                      // console.log('plugin hide')
                    },
                    onCancel () {
                      // console.log('plugin cancel')
                    },
                    onConfirm () {
                        AlertModule.show({
                            title: '暂时不支持删除',
                            content: '',
                            onShow () {
                              console.log('打开')
                            },
                            onHide () {
                              console.log('关闭')
                            }
                        })
                        // if(type=='delete'){
                        //     console.log(123)
                        //     let data = {id: row.id}
                        //     axios('/device/productSecond/delete','post',data).then(res=>{
                        //         if(res.data.code==1000){
                        //             this.$vux.toast.text('删除成功', 'middle')
                        //             this.getData(this.idx)   
                        //         }
                        //     })
                    }
                })
            },
        }
    }
</script>

<style scoped>
    @import '../assets/css/manage.css';
    .demo-content {
        padding: 10px 10px;
    }
    .news-box{
        padding:20px 0;
        text-align: center;
    }
</style>
